import React, {Component} from 'react';
import {Button, Checkbox, Form, Input,message} from "antd";


const layout = {
  labelCol: {  /*每一个条目的配置项*/
    span: 6,
    offset: 4
  },
  wrapperCol: { /**/
    span: 6,

  },
};
const tailLayout = {
  wrapperCol: {
    offset: 10,
    span: 16,
  },
};


class Login extends Component {
  /*render() {
    return (
      <div className='drag'>
        {/!*<input type="text" placeholder={'用户名'}/>*!/}
        {/!*<input type="text" placeholder={'密码'}/>*!/}
        {/!*<br/>*!/}
        {/!*<button onClick={()=>{*!/}
        {/!*  localStorage.setItem('token', 'abc');*!/}
        {/!*  this.props.history.push('/nav');*!/}
        {/!*}}>登录</button>*!/}


      </div>
    );
  }*/
  onFinish = ({username, password, remember}) => {
    // 发送请求  请求登录接口
    if (username === 'admin' && password === '123456') {
      message.success('登录成功');
      console.log('登录成功');
      localStorage.setItem('token', username);
      this.props.history.replace('nav');
    } else {
      message.error('用户名或者密码错误');
      console.log('登录失败');
    }
  };

  onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
  };

  render() {
    return (
      <Form
        {...layout}
        style={{marginTop: '100px'}}
        name="basic"  /*前缀*/
        initialValues={{/*初始值*/
          remember: true,
        }}
        onFinish={this.onFinish} /* 表单验证成功的回调*/
        onFinishFailed={this.onFinishFailed}  /*失败的回调*/
      >
        <Form.Item
          label="用户名"
          name="username"
          rules={[
            {
              required: true,
              message: '用户名必须填写',
            },
          ]}
        >
          <Input/>
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          colon={true}
          rules={[
            {
              required: true,
              message: '密码必须填写',
            },
          ]}
        >
          <Input.Password/>
        </Form.Item>

        <Form.Item {...tailLayout} name="remember" valuePropName="checked">
          <Checkbox>记住我</Checkbox>
        </Form.Item>

        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    )
  }

}


export default Login;
